<template>
  <view class="ve-picker-wrapper">
    <view v-if="!slotStatus" class="ve-picker-trigger" @click="pickerClicked">
      <view
        class="ve-picker-trigger_input"
        :style="{
          color: disabled ? '#cdced0' : '',
        }"
      >
        <text v-if="selectTitle">{{ selectTitle }}</text>
        <text
          v-else
          :style="{
            color: disabled ? '#cdced0' : '#9ea5bb',
          }"
        >
          请选择
        </text>
      </view>
      <view class="ve-picker-trigger_unit">
        <ve-icon v-if="disabled" name="arrow_right_2" size="32" :block="true" />
        <ve-icon v-else name="arrow_right_0" size="32" :block="true" />
      </view>
    </view>
    <view v-else class="ve-picker-trigger" @click="visible = true">
      <slot name="picker-line"></slot>
    </view>
    <!-- 弹框 -->
    <ve-popup :model-value="visible" mode="bottom" @close="close">
      <view class="ve-picker-box">
        <view class="ve-picker-box-head">
          <view class="item-btn" @tap="cancel">取消</view>
          <!-- 关键字搜索 -->
          <view class="ve-picker-search" v-if="showFilter">
            <image :src="imgUrl + '/v240newui/search.png'" class="icon_search" mode="widthFix"></image>
            <input
              type="text"
              placeholder="请输入"
              placeholder-style="color:#8491A8; font-size:28rpx;"
              confirm-type="搜索"
              v-model="filterKeyWord"
              :always-embed="true"
              :adjust-position="true"
              :cursor-spacing="cursorSpacing"
              @confirm="filterChange"
            />
          </view>
          <template v-else>
            <view class="title" v-if="popUpTitle || placeholder">{{ popUpTitle || placeholder }}</view>
          </template>
          <view class="item-btn confirm-btn" @click="handleConfirm">确定</view>
        </view>
        <view class="ve-picker-box-body">
          <picker-view
            class="ve-picker-view"
            indicator-style="height: 44px;"
            :value="valueArr"
            :immediate-change="true"
            @change="handleChange"
            v-if="Array.isArray(range) && range.length > 0"
          >
            <picker-view-column>
              <view class="column-item" v-for="(item, index) in range" :key="index">
                {{ options ? item[options.label] : item }}
              </view>
            </picker-view-column>
          </picker-view>
          <view v-else>
            <ve-empty :marginTop="50" />
          </view>
        </view>
      </view>
    </ve-popup>
  </view>
</template>

<script>
  export default {
    name: 've-picker-inline',
    props: {
      modelValue: [String, Number],
      showFilter: {
        type: Boolean,
        default: false,
      },
      range: {
        type: Array,
        default: () => {
          return []
        },
      },
      options: {
        type: Object,
        default: () => {
          return {
            value: 'value',
            label: 'label',
          }
        },
      },
      placeholder: {
        type: String,
        default: '请选择',
      },
      popUpTitle: {
        type: String,
        default: '请选择',
      },
      // 右侧的单位
      unit: {
        type: [String],
        default: '',
      },
      slotStatus: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      range: {
        handler() {
          this.initValueArr()
        },

        immediate: true,
      },
      modelValue: {
        handler() {
          this.initValueArr()
        },
        immediate: true,
      },
    },
    computed: {
      selectOption() {
        let range = this.range
        if (range && (this.modelValue !== undefined || this.modelValue == 0)) {
          let curr = range.find((item) => {
            return item[this.options.value] == this.modelValue
          })
          return curr || {}
        }
        return {}
      },
      selectTitle() {
        return this.selectOption[this.options.label]
      },
    },
    data() {
      return {
        visible: false,
        imgUrl: getApp().globalData.requestImgUrl,
        valueArr: [0],
        confirmValue: [],
        filterKeyWord: '',
        cursorSpacing: 18,
      }
    },
    mounted() {
      // 区分ios 和 android 设置不同的 cursorSpacing
      let platform = uni.getSystemInfoSync().platform
      switch (platform) {
        case 'android':
          this.cursorSpacing = 18
          break
        case 'ios':
          this.cursorSpacing = 48
          break
        default:
          this.cursorSpacing = 0
          break
      }
    },
    methods: {
      pickerClicked() {
        if (!this.disabled) {
          this.visible = true
        }
      },
      filterChange(e) {
        this.$emit('filterChange', e.detail.value)
      },
      initValueArr() {
        if (Array.isArray(this.range) && this.range.length > 0) {
          let index = this.range.findIndex((item) => {
            if (this.options && this.options.value) {
              return item[this.options.value] === this.modelValue
            } else {
              return item == this.modelValue
            }
          })

          if (index >= 0) {
            this.valueArr[0] = index
          }
        }
      },
      handleConfirm() {
        this.confirmValue = this.valueArr
        let option = this.range[this.valueArr[0]]
        let value = ''
        if (this.options && this.options.value) {
          value = option[this.options.value]
        }
        if (value || value == 0) {
          this.$emit('update:modelValue', value)
          this.$emit('change', value, option)
          this.close()
        }
      },
      cancel() {
        this.valueArr = this.confirmValue
        this.close()
      },
      close() {
        this.visible = false
      },
      handleChange(e) {
        this.valueArr = e.detail.value
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-picker-box {
    // 安全底部距离
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    &-head {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border-bottom: 2px solid #F1F2F5;
      color: #1f2334;
      font-size: 32rpx;
      line-height: 44rpx;

      .item-btn {
        padding: 28rpx;
      }

      .title {
        font-weight: 500;
      }

      .confirm-btn {
        font-weight: 500;
        color: #3072f6;
      }
    }

    &-body {
      height: 40vh;

      .column-item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        padding: 0 8rpx;
      }
    }
  }

  .ve-picker-view {
    height: 100%;
    box-sizing: border-box;
  }

  .ve-picker-search {
    display: flex;
    align-items: center;
    width: 60%;
    border-radius: 16rpx;
    background: #fff;
    padding: 10rpx;
    font-size: 28rpx;
    color: #191c27;
    border: 2rpx solid #a2a3a9;

    .icon_search {
      margin-right: 16rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .ve-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &_input {
      font-size: 28rpx;
      color: #191c27;
      flex: 1;
      text-align: right;
    }
    &_unit {
      flex-shrink: 0;
      margin-left: 6rpx;
    }
  }
</style>
